
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

<div id="address_main" xlvobject="xlv.obj.pane" xlvprop="{glow:{enable:true},border:{enable:true}}"
		xlvmethod="{
		initial:function(){
				this.$self('initial');	
		         
		},
		
			styleFor:function(root){
				var style={};
				style.background='url(/xlive/images/wsp_1.png) left top repeat';
				style.fontFamily='Arial';
				style.fontSize='12px';
				style.minWidth='300px';
				style.minHeight='200px';
				style.width='400px'	;						
				style.padding='4px';
				Element.setStyle(root,style);
			}
		}"
	>
	 
<div id="markquee_main"  xlvobject="xlv.obj.markquee" xlvprop="{direction:'bot',interval:40,step:10}" style="height:180px; " 
     xlvmethod="{
		construct:function(){
			var style={position:'relative',overflow:'hidden'};
			Element.setStyle(this,style);
			var div;
			this.$V.scroller=div=document.createElement('div');
			div.setAttribute('id', 'xlvid_scroller');
			style={position:'relative'};
			Element.setStyle(div,style);			
			var inner1,inner2;
			inner1=document.createElement('div');
			while(this.firstChild)inner1.appendChild(this.firstChild);	
			inner2=inner1.cloneNode(true);
			div.appendChild(inner1);
			div.appendChild(inner2);
			this.appendChild(div);			
			this.$V.scroller.ini=true;
			this.$V.scroller.aspeed=0;
			this.$V.scroller.cspeed=0;
		},
		initial:function(){
			this.$V.width=this.$V.scroller.offsetWidth;
			Element.addClassName(this,'class_markquee');
			this.$V.pauseFlag=true;		
			var int=this.$P.interval;
			this.$V.interval=setInterval(this._interval.bind(this),int);
		},
		_mouseover:function(event){
			this.$V.pauseFlag=true;		
		},
		_mouseout:function(event){
			
			if(this.$P.direction=='top')
			    this.$P.direction='bot'
			 else
			    this.$P.direction='top'
			
			this.$V.pauseFlag=false;
		},
		effect:function(){
			
			var width=this.$V.scroller.offsetWidth;
			var height=this.$V.scroller.offsetHeight;
			var out_width=this.offsetWidth;
			var out_height=this.offsetHeight;
			if(!(width>0 && height>0))return;
			
			
			 if(this.$P.direction=='top' )
			       if(this.$V.scroller.posy<height/2)
			    	   this.$V.scroller.posy+=(this.$P.step-this.$V.scroller.aspeed+this.$V.scroller.cspeed);
			       else
			           this.$V.scroller.posy=(this.$P.step-this.$V.scroller.aspeed+this.$V.scroller.cspeed);  
			 else
			        if(this.$V.scroller.posy>0)
			    	   this.$V.scroller.posy-=(this.$P.step-this.$V.scroller.aspeed+this.$V.scroller.cspeed);
			       else
			           this.$V.scroller.posy=(height/2)-(this.$P.step-this.$V.scroller.aspeed+this.$V.scroller.cspeed);  
			 
			   
			      this.scrollTop=this.$V.scroller.posy;	
			        
			        if(this.$V.scroller.aspeed>0)
			        	this.$V.scroller.aspeed+=2;			      		
			      	else	
			      	if(this.$V.scroller.cspeed<20)		      	
			      	this.$V.scroller.cspeed+=2;
			      
			      if(this.$V.scroller.aspeed==(this.$P.step+this.$V.scroller.cspeed))
			        if((this.$V.scroller.posy%60)==0)
					{this.$V.pauseFlag=true;
					 this.$V.scroller.cspeed=0;
					 this.$V.scroller.aspeed=0;
					}
					else{
					this.$V.scroller.aspeed-=2;					
					}					
			
		}
	}"
>
<div style="height:60px;font-size:20px;color:black; ">123</div>
<div style="height:60px;font-size:20px;color:black; ">1234</div>
<div style="height:60px;font-size:20px;color:black; ">12345</div>

</div>
<button id="up" xlvobject="xlv.obj.process"
					xlvmethod="{
						initial:function(){
							this.addEventHandler('mousedown','_mousedown');
							this.addEventHandler('mouseup','_mouseup');
							this.enabled(this.$P.enabled);
							this.resetInterval();
						},
						_mouseup:function(event){
							if(Element.hasClassName(this,'disabled')&&this.$P.srcImgDisabled)this.$V.title.style.backgroundImage='URL('+this.$P.srcImgDisabled+')';
							else if(this.$P.srcImg) this.$V.title.style.backgroundImage='URL('+this.$P.srcImg+')';
							var m=this.getObjectById('markquee_main');
							m.$V.scroller.aspeed=2;
							m.$V.scroller.cspeed=0;
							
						},
						_mousedown:function(event){
							if(event)this.resetInterval();
							if(Element.hasClassName(this,'disabled'))return;
							if(this.$P.srcImgClick) this.$V.title.style.backgroundImage='URL('+this.$P.srcImgClick+')';							
							setTimeout(function(){this.process();}.bind(this),1);
							if(event)event.stop();
						},
						process:function(){
							var m=this.getObjectById('markquee_main');
							if(m.$V.scroller.ini){
								m.$V.scroller.posy = 0;
								m.$V.scroller.ini=false;								
							}
							m.$P.direction='top';						
						    m.$V.pauseFlag=false;
						    m.$V.scroller.aspeed=0;
						     m.$V.scroller.cspeed=0;
							}
						
					}"
			>up</button>
     <button id="down" xlvobject="xlv.obj.process"
					xlvmethod="{
						initial:function(){
							this.addEventHandler('mousedown','_mousedown');
							this.addEventHandler('mouseup','_mouseup');
							this.enabled(this.$P.enabled);
							this.resetInterval();
						},
						_mouseup:function(event){
							if(Element.hasClassName(this,'disabled')&&this.$P.srcImgDisabled)this.$V.title.style.backgroundImage='URL('+this.$P.srcImgDisabled+')';
							else if(this.$P.srcImg) this.$V.title.style.backgroundImage='URL('+this.$P.srcImg+')';
							var m=this.getObjectById('markquee_main');
							m.$V.scroller.aspeed=2;
							m.$V.scroller.cspeed=0;
							
						},
						_mousedown:function(event){
							if(event)this.resetInterval();
							if(Element.hasClassName(this,'disabled'))return;
							if(this.$P.srcImgClick) this.$V.title.style.backgroundImage='URL('+this.$P.srcImgClick+')';							
							setTimeout(function(){this.process();}.bind(this),1);
							if(event)event.stop();
						},
						process:function(){
							var m=this.getObjectById('markquee_main');
							if(m.$V.scroller.ini){
								m.$V.scroller.posy = m.$V.scroller.offsetHeight/2;
								m.$V.scroller.ini=false;
								
							}
							m.$P.direction='bot';
							m.$V.pauseFlag=false;
							m.$V.scroller.aspeed=0;
						    m.$V.scroller.cspeed=0;
							
						}     
					}"
			>down</button>
	</div>
	</body>
	</html>